<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!--头部固定引用-->
  <meta charset="utf-8">
  <meta name="full-screen" content="yes">
  <meta name="x5-fullscreen" content="true">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
  <link rel="stylesheet" href="../../css/base.css">
  <!--固定引用结束,自定义引用添加在下面-->
  <title>JT2</title>
  <!--页面样式添加在这里，多看看base。css里面的公共样式，大部分常用的都有，避免使用独立css文件为单独页面设置样式，避免随意添加样式到公共样式-->
  <style>
      .moreVideo-header img {
          width: 0.32rem;
          height: 0.32rem;
          position: absolute;
          left: 0.32rem;
          top: 50%;
          transform: translateY(-50%);
      }
      .videosearch-list {
        padding-top: 1.02rem;
      }
      .videosearch-list ul {
          list-style: none;
          padding: 0;
          margin: 0;
          padding: 0 0.32rem;
      }
      .videosearch-list ul li .videoBox {
          width: 6.86rem;
          height: 3.12rem;
          position: relative;
          background-size: cover!important;
          /* background: pink; */
          /* border-radius: 0.08rem; */
      }
      .videosearch-list ul li .videoBox  img {
          width: 0.96rem;
          height: 0.96rem;
          position: absolute;
          left: 50%;
          top:50%;
          transform: translate(-50%,-50%);
      }
      .videosearch-list ul li .subtitle {
        position: relative;
        margin-bottom: 0.18rem;
        height: 0.4rem;
      }
      /*  */
      .moreVideo-header {
    padding:0.22rem 0.32rem 0.26rem;
    font-family: PingFangSC-Medium;
    font-size: 0.32rem;
    letter-spacing: 0;
    text-align: center;
    position: fixed;
    z-index: 1;
    width: 100%;
  }
  .videosearch-list ul li {
  box-shadow: 0 0 16px 0 rgba(0,0,0,0.10);
  border-radius: 0.08rem;
  padding-bottom: 0.84rem;
  position: relative;
}
.videosearch-list ul li::after{
  position: absolute;
  display: block;
  content: '';
  width: 100%;
  height: 0.4rem;
  bottom: 0;
  left: 0;
}
.videosearch-list ul li .title {
  font-family: PingFangSC-Medium;
  font-size: 0.32rem;
  line-height: 0.44rem;
  margin-bottom: 0.12rem;
  margin-top: 0.24rem;
  padding-left: 0.28rem;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.videosearch-list ul li .subtitle span:nth-child(1){
  position: absolute;
  left: 0.28rem;
  font-family: PingFangSC-Regular;
  font-size: 0.28rem;
  letter-spacing: 0;
  text-align: left;
  line-height: 0.4rem;
}
.videosearch-list ul li .subtitle span:nth-child(2){
  position: absolute;
  right: 0.34rem;
  font-family: PingFangSC-Regular;
  font-size: 0.26rem;
}
.videosearch-list ul li .time{
  font-family: PingFangSC-Regular;
  font-size: 0.26rem;
  line-height: 0.36rem;
  padding-left: 0.28rem;
}
  </style>
</head>
<!--尽量不要在body上添加样式，除了背景色-->
<body>
<div>
  <!--具体代码-->

  <!-- 头部 -->
  <div class="moreVideo-header">
    <img src="../../images/allPic/jiantou.png" alt="" onclick='closeWindow()' class="headerimg">
    更多视频
  </div>

  <!-- 视频列表 -->
  <div class="videosearch-list">
    <ul>
    </ul>
  </div>
</div>
</body>
<!--下面五个文件为固定引用，自己根据情况调整路径，不要跟换引入顺序，其他引用添加在后面-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--固定引用结束-->
<!--避免一个页面包含过多功能，减少js重绘页面，推荐分功能，分页面-->
<script>
  let pageNum = 1
  let searchWord
  /*固定页面初始化方法，用于替代$(function(){}),param为url参数，Object类型*/
  function initPage(params) {

    //设置深色模式
    if(configColorType === '1'){
      $('.headerimg').attr('src','../../images/allPic/blackfanhui.png')
    }else{
      $('.headerimg').attr('src','../../images/allPic/jiantou.png')
    }
    $('.videosearch-list ul').empty()
    getList({'pageNum':pageNum,'searchWord':''})
  }

  /*页面所在窗口由后台前台时触发的方法,param为url参数，Object类型*/
  function startPage(params) {

  }

  function reLoadPage() {
    $('.videosearch-list ul').empty()
    pageNum = 1
    getList({'pageNum':pageNum,'searchWord':''})
  }
  //获取列表
  function getList(params){
    Server.getElseVideoList.getVideoColumnList({'funcCode':'','infoType':'2','pageSize':10,'pageNum':params.pageNum || pageNum}).then(res => {
      console.log(res)
      if(res.code === 0){
        let list = res.data.result.list
        if(list.length !== 0){
          //改变时间
          list.map((item,index) => {
            let creatTime = item.issuerDttm * 1000
            let nowTime = +new Date().valueOf()
            let year = new Date(creatTime).getFullYear()
            let month = new Date(creatTime).getMonth() + 1 < 10 ? '0' + (new Date(creatTime).getMonth() + 1) : new Date(creatTime).getMonth() + 1
            let day = new Date(creatTime).getDate() < 10 ? '0' + new Date(creatTime).getDate() : new Date(creatTime).getDate()
            let hour = new Date(creatTime).getHours() < 10 ? '0' + new Date(creatTime).getHours() : new Date(creatTime).getHours()
            let minute = new Date(creatTime).getMinutes() < 10 ? '0' + new Date(creatTime).getMinutes() : new Date(creatTime).getMinutes()
            if(nowTime - creatTime < 30 * 60 * 1000){
              if(nowTime - creatTime < 1 * 60 * 1000){
                item.issuerDttm = '刚刚'
              }else{
                item.issuerDttm = parseInt((nowTime - creatTime) / 1000 / 60) + '分钟前'
              }
            }else if(nowTime - creatTime < 24 * 60 * 60 * 1000){
              if(nowTime - creatTime < 60 * 60 * 1000){
                item.issuerDttm = '1小时前'
              }else {
                item.issuerDttm = parseInt((nowTime - creatTime) / 1000 / 60 / 60) + '小时前'
              }
            }else if(new Date().getDate() - new Date(creatTime).getDate() == 1 && new Date().getMonth() == new Date(creatTime).getMonth() && new Date().getFullYear() == new Date(creatTime).getFullYear()){
              item.issuerDttm = '昨天' + hour + ':' + minute
            }else{
              item.issuerDttm = year + '-' + month + '-' + day + ' ' + hour + ':' + minute
            }
          })

          list.map((v,i) => {
            let li =
                      `<li  onclick="govideoPlay({'infoId':'${v.infoId}','trainingType':'${v.trainingType}'})">
                          <div class="videoBox" style="background:url(${v.coverImgUrl}) no-repeat center center;">
                              <img src="../../images/allPic/shipingbtn.png" alt="">
                          </div>
                          <div class="title">
                              ${v.mainTitle}
                          </div>
                          <div class="subtitle">
                              <span style="font-size: 0.26rem">发布时间：${v.issuerDttm}</span>
                              <span>${v.readCnt}人观看</span>
                          </div>
                      </li>`
            $('.videosearch-list ul').append(li)
            // $('.searchipt').val('')
          })
        }else{
          // jsBridge.toast('暂无数据')
        }
      }else{
        // jsBridge.toast('数据异常')
      }
    })
  }
  //点击视频播放按钮
  function govideoPlay(params){
    // console.log(params)
    if('1' === params.trainingType || '3' === params.trainingType){
      jsBridge.openVideo({'infoId':params.infoId,'resourceType':params.trainingType})
    }else if(params.trainingType === '2'){
      jsBridge.openWindow('/html/video/videoplay.html?infoId=' + params.infoId + '&isopencomment=0',{}, {noBar: false})
    }
    // jsBridge.openWindow('/html/video/videoplay.html?infoId='+params.infoId+'&isopencomment=0',{}, {noBar: false})
  }
  //点击返回按钮
  function closeWindow(){
    jsBridge.closeWindows()
  }
  //滑动加载下一页
  document.addEventListener('scroll',function(){
    let top = $('.videosearch-list ul').offset().top
    let height = $('.videosearch-list ul').outerHeight(true)
    let maxHeight = document.body.offsetHeight
    let scroll = $(document).scrollTop()
    // console.log(scroll,'scroll')
    // console.log(top,'top')
    // console.log(height,'height')
    // console.log(maxHeight,'maxHeight')
    // console.log(top+height-maxHeight,'top+height-maxHeight')
    if(Math.round(top + height - maxHeight) === Math.round(scroll) ){
      pageNum++
      getList({'pageNum':pageNum,'searchWord':searchWord})
    }
  })

</script>
</html>
